<script setup lang="ts">
// 定义团队成员数据
const teamMembers = ref([
  {
    id: 1,
    name: '张三',
    position: '首席执行官',
    shortTitle: 'CEO',
    bgColor: 'bg-blue-500',
    titleColor: 'text-blue-600',
    hoverColor: 'group-hover:text-blue-600',
    description: '拥有15年工业自动化经验，曾任职于多家知名科技公司，专注于AI技术在工业领域的应用。'
  },
  {
    id: 2,
    name: '李四',
    position: '首席技术官',
    shortTitle: 'CTO',
    bgColor: 'bg-green-500',
    titleColor: 'text-green-600',
    hoverColor: 'group-hover:text-green-600',
    description: '计算机科学博士，在机器学习和机器人控制领域有深厚造诣，发表多篇顶级学术论文。'
  },
  {
    id: 3,
    name: '王五',
    position: '首席运营官',
    shortTitle: 'COO',
    bgColor: 'bg-purple-500',
    titleColor: 'text-purple-600',
    hoverColor: 'group-hover:text-purple-600',
    description: 'MBA学位，拥有丰富的企业运营和项目管理经验，擅长将技术转化为商业价值。'
  }
])
</script>

<template>
  <!-- 创始团队 -->
  <section id="team" class="section bg-white w-full py-16">
    <div class="w-full max-w-[2000px] mx-auto px-4 md:px-8 lg:px-16">
      <div class="text-center mb-12">
        <h2 class="text-3xl lg:text-4xl font-bold mb-4">
          <span
            class="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">创始团队</span>
        </h2>
        <p class="text-lg text-gray-600 text-center">
          经验丰富的专业团队，致力于推动工业智能化发展
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 循环生成团队成员卡片 -->
        <div
          v-for="member in teamMembers"
          :key="member.id"
          class="group flex flex-col transform items-center border border-gray-100 rounded-2xl bg-white p-6 text-center shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
        >
          <div class="relative mb-4">
            <div
              :class="[
                'absolute inset-0 rounded-full opacity-30 blur-xl transition-opacity duration-300 group-hover:opacity-50',
                member.bgColor
              ]"
            />
            <div
              :class="[
                'relative h-24 w-24 flex transform items-center justify-center rounded-full shadow-lg transition-transform duration-300 group-hover:scale-110',
                member.bgColor
              ]"
            >
              <span class="text-white text-xl font-bold">{{ member.shortTitle }}</span>
            </div>
          </div>
          <h3 :class="['text-xl font-bold mb-2 text-gray-900 transition-colors', member.hoverColor]">{{ member.name }}</h3>
          <p :class="['font-medium mb-2', member.titleColor]">{{ member.position }}</p>
          <p class="text-gray-600 text-sm leading-relaxed">
            {{ member.description }}
          </p>
        </div>
      </div>
    </div>
  </section>
</template>
